import React, { Component } from 'react'
import { reqgetcate, reqgetgoods } from "../../http/api"
import Header from "../../components/Header/Header"
import { SideBar } from 'antd-mobile'
import "./Cate.less"
import { $pre } from '../../http/http'
import { Link } from 'react-router-dom'
export default class Cate extends Component {
  constructor() {
    super()
    this.state = {
      rightgoods: [],
      categoods: [],
      n:0
    }
  }
  componentDidMount() {
    reqgetcate().then(res => {
      this.setState({
        rightgoods: res.data.list
      })
    })
    
    this.list(1);
  }
  dianji(id){
    this.setState({
      n:id
    })
    this.list(id)
  }
  list(n){
    reqgetgoods({fid:n}).then(res=>{
       this.setState({
        categoods: res.data.list
       })
    })
  } 
  render() {
    let { rightgoods, categoods } = this.state
    return (
      <div>
        <Header title="分类"></Header>
        {
          <div className='wrap'>
            <div className='left'>
              <ul>
                {rightgoods.map(item => {
                  return (
                    <li key={item.id} onClick={()=>{this.dianji(item.id)}}>{(item.catename)}</li>
                  )
                })}
              </ul>
            </div>
            <div className='card'>
                {
                  categoods.map(item =>{
                    return (
                      <Link to={'/detail/'+item.id } className='right' key={item.id}>
                        <img src={$pre+item.img} alt=''></img>
                        <div className='right-v'>
                          <h3>商品名称:{item.goodsname}</h3>
                          <div>价格:{item.price}</div>
                        </div>
                      </Link>
                    )
                  })
                }
            </div>
          </div>
        }
      </div>
    )
  }
}
